<template>
    <div class="header">
        <div class="header-left">
            <div class="iconfont back-icon">&#xe624;</div>
        </div>
        <div class="header-input">
            <span class="iconfont">&#xe632;</span>
            输入城市/景点/游玩主题
            </div>
      <router-link to="/city">
        <div class="header-right">
            {{this.headercity}}
            <span class="iconfont">&#xe6aa;</span>
        </div>
      </router-link>
    </div>
</template>
<script>
export default {
    name:"HomeHeader",
    props:["headercity"]
}
</script>
<style lang="stylus" scope>
@import '~styles/variable.styles'
  body
    margin: 0px
    .header
      display: flex
      line-height: 40px
      background: $bgcolor
      color:#fff
      .header-left
        width: 40px
        float: left
        .back-icon
           width:40px
           text-align :center
           font-size:18px

      .header-input
        flex: 1
        color:#ccc
        padding-left:5px
        height: 30px
        line-height: 30px
        margin-top:5px
        background: #fff
        width: 30px
        border-radius: 5px
      .header-right
        color:#fff;
        width: 85px
        float: right
        text-align: center
       
    
        
    

</style>